<template>
  <div class="main">
    <el-row :gutter="20">
      <el-col :span="12">
        <div class="cpu box">
          <div class="title"><h4>cpu</h4></div>
          <div class="content">
            <table>
              <tHead>
                <tr>
                  <td v-for="(item, index) in cpuData.label" :key="index">{{
                    item
                  }}</td>
                </tr>
              </tHead>
              <tbody>
                <tr v-for="(item, index) in cpuData.data" :key="index">
                  <td>{{ item.label }}</td>
                  <td>{{ item.value }}</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="internal-storage box">
          <div class="title"><h4>内存</h4></div>
          <div class="content">
            <table>
              <tHead>
                <tr>
                  <td
                    v-for="(item, index) in internalStorageData.label"
                    :key="index"
                    >{{ item }}</td
                  >
                </tr>
              </tHead>
              <tbody>
                <tr
                  v-for="(item, index) in internalStorageData.data"
                  :key="index"
                >
                  <td>{{ item.label }}</td>
                  <td>{{ item.value1 }}</td>
                  <td>{{ item.value2 }}</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </el-col>
    </el-row>
    <div class="server box">
      <div class="title"><h4>服务器信息</h4></div>
      <div class="content">
        <table>
          <tHead>
            <tr>
              <td v-for="(item, index) in serverData.label" :key="index">{{
                item
              }}</td>
            </tr>
          </tHead>
          <tbody>
            <tr v-for="(item, index) in serverData.data" :key="index">
              <td>{{ item.label }}</td>
              <td>{{ item.value1 }}</td>
              <td>{{ item.value2 }}</td>
              <td>{{ item.value3 }}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    <div class="virtual-machine box">
      <div class="title"><h4>Java虚拟机信息</h4></div>
      <div class="content">
        <table>
          <tHead>
            <tr>
              <td
                v-for="(item, index) in virtualMachineData.label"
                :key="index"
                >{{ item }}</td
              >
            </tr>
          </tHead>
          <tbody>
            <tr v-for="(item, index) in virtualMachineData.data" :key="index">
              <td>{{ item.label }}</td>
              <td>{{ item.value1 }}</td>
              <td>{{ item.value2 }}</td>
              <td>{{ item.value3 }}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    <div class="disc box">
      <div class="title"><h4>磁盘状态</h4></div>
      <div class="content">
        <table>
          <tHead>
            <tr>
              <td v-for="(item, index) in discData.label" :key="index">{{
                item
              }}</td>
            </tr>
          </tHead>
          <tbody>
            <tr v-for="(item, index) in discData.data" :key="index">
              <td>{{ item.dirName }}</td>
              <td>{{ item.sysTypeName }}</td>
              <td>{{ item.typeName }}</td>
              <td>{{ item.total }}</td>
              <td>{{ item.free }}</td>
              <td>{{ item.used }}</td>
              <td>{{ item.usage }}%</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>

<script>
import { getNetworkMonitoringData } from '@/api/admin/system/networkMonitoring.js'
export default {
  data() {
    return {
      cpuData: {
        label: ['属性', '值'],
        data: [
          { label: '核心数', value: '' },
          { label: '用户使用率', value: '' },
          { label: '系统使用率', value: '' },
          { label: '当前空闲率', value: '' },
        ],
      },
      internalStorageData: {
        label: ['属性', '内存', 'JVM'],
        data: [
          { label: '总内存', value1: '', value2: '' },
          { label: '已用内存', value1: '', value2: '' },
          { label: '剩余内存', value1: '', value2: '' },
          { label: '使用率', value1: '', value2: '' },
        ],
      },
      serverData: {
        label: [],
        data: [
          { label: '服务器名称', value1: '', value2: '操作系统', value3: '' },
          { label: '服务器IP', value1: '', value2: '系统架构', value3: '' },
        ],
      },
      virtualMachineData: {
        label: [],
        data: [
          { label: 'Java名称', value1: '', value2: 'Java版本', value3: '' },
          { label: '启动时间', value1: '', value2: '运行时长', value3: '' },
          { label: '安装路径', value1: '', value2: '', value3: '' },
          { label: '项目路径', value1: '/', value2: '', value3: '' },
        ],
      },
      discData: {
        label: [
          '盘符路径',
          '文件系统',
          '盘符类型',
          '总大小',
          '可用大小',
          '已用大小',
          '已用百分比',
        ],
        data: [],
      },
    }
  },
  created() {
    this.getData()
  },
  methods: {
    async getData() {
      let res = await getNetworkMonitoringData()
      if (res.data.code == 0) {
        const data = res.data.data[0]
        const cpuMap = ['cpuNum', 'used', 'sys', 'free']
        cpuMap.forEach((item, index) => {
          this.cpuData.data[index].value = data.cpu[item]
          if (index != 0) {
            this.cpuData.data[index].value += '%'
          }
        })
        const internalStorageMap = ['total', 'used', 'free', 'usage']
        internalStorageMap.forEach((item, index) => {
          this.internalStorageData.data[index].value1 = data.mem[item]
          this.internalStorageData.data[index].value2 = data.jvm[item]
          if (index == 3) {
            this.internalStorageData.data[index].value1 += '%'
            this.internalStorageData.data[index].value2 += '%'
          } else {
            this.internalStorageData.data[index].value1 += 'G'
            this.internalStorageData.data[index].value2 += 'M'
          }
        })
        const serverMap = [
          ['computerName', 'osName'],
          ['computerIp', 'osArch'],
        ]
        serverMap.forEach((item, index) => {
          this.serverData.data[index].value1 = data.sys[item[0]]
          this.serverData.data[index].value3 = data.sys[item[1]]
        })
        const virtualMachineMap = [
          ['name', 'version'],
          ['startTime', 'runTime'],
          ['home'],
        ]
        virtualMachineMap.forEach((item, index) => {
          this.virtualMachineData.data[index].value1 = data.jvm[item[0]]
          this.virtualMachineData.data[index].value3 = data.jvm[item[1]]
        })
        this.discData.data = data.sysFiles
      }
    },
  },
}
</script>

<style scoped lang="scss">
.main {
  background: rgb(243, 243, 244);
  padding: 20px;
  .box {
    margin-bottom: 10px;
    background: rgb(255, 255, 255);
    .title {
      background-color: #ffffff;
      border-color: #e7eaec;
      -webkit-border-image: none;
      -o-border-image: none;
      border-image: none;
      border-style: solid solid none;
      border-width: 0px 0px 0;
      color: inherit;
      margin-bottom: 0;
      padding: 14px 15px 7px;
      min-height: 40px;
    }
    .content {
      background-color: #ffffff;
      color: inherit;
      padding: 15px 20px 20px 20px;
      border-color: #e7eaec;
      -webkit-border-image: none;
      -o-border-image: none;
      border-image: none;
      border-style: solid solid none;
      border-width: 1px 0px;
      table {
        width: 100%;
        margin-bottom: 20px;
      }
    }
  }
}
</style>